<template>
  <div class="login">
    <div class="return" @click="$router.back()">
      <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 48 48"
        fill="rgba(255, 255, 255, 1)">
        <path d="M0 0h48v48H0z" fill="none" />
        <path d="M40 22H15.66l11.17-11.17L24 8 8 24l16 16 2.83-2.83L15.66 26H40v-4z" />
      </svg>
    </div>
    <div class="img">
      <img src="@/images/wechat.png" alt="">
    </div>
    <div class="hr"></div>
    <div class="text">登陆后将获得以下权限</div>
    <div class="text">获得你的公开信息（昵称、头像、地区及性别）</div>
    <van-button round block to="">登录</van-button>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-size: 100%;
}

.return {
  margin-left: 52px;
  margin-top: 41px;

  svg {
    width: 55px;
    height: 55px;
  }
}

.login::after {
  content: "";
  background: url('@/images/cake01.jpg') no-repeat;
  background-size: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}



.img {
  img {
    width: 128px;
    height: 128px;

  }

  margin-left: 311px;
  margin-top: 167px;

}

.hr {
  width: 542px;
  height: 2px;
  margin-left: 90px;
  margin-top: 114px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(153, 153, 153, 1);
  font-size: 28px;
  line-height: 150%;
  text-align: center;
}

.text {
  height: 42px;
  margin-left: 90px;
  margin-top: 34px;
  color: rgba(56, 56, 56, 1);
  font-size: 28px;
  line-height: 150%;
  text-align: left;
}

.van-button {
  width: 95%;
  height: 80px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 141, 26, 1);
  border-radius: 11px;
  font-size: 40px;
  line-height: 150%;
  margin: 70px auto;

}
</style>